<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<%@ include file="/WEB-INF/jsp/common/header.jsp" %>
</head>
<body class="easyui-layout">
<!-- ==========   类别 树   ========================= -->
<div data-options="region:'west'" style="width:250px;">
	<ul id="categoryTree"></ul>
</div>
<!-- ==========   属性  新增    ========================= -->
<div data-options="region:'center'">
	<div id="addAttrDialog" title="添加属性" class="easyui-dialog" data-options="modal:true,closed:true" style="width:300px;height:300px;">
		<form id="addAttrForm" action="${root}/admin/attr/save" method="post">
			<div>
				<table>
					<tr>
						<td>编号</td><td><input type="text" name="id" class="easyui-validatebox" data-options="required:true"  /></td>
					</tr>
					<tr>
						<td>名称</td><td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
					</tr>
					<tr>
						<td>排序</td><td><input type="text" name="sort" class="easyui-validatebox" data-options="required:true"/></td>
					</tr>
				    <tr>
						<td>类别</td><td><input type="text" name="category_id" class="easyui-validatebox" data-options="required:true" readonly="readonly" /></td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	<!-- ==========   属性 工具条    ========================= -->
	<div id="attrToolbar">
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" id="addAttrBtn">新增属性</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" id="updateAttrBtn">修改属性</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" id="deleteAttrBtn">删除属性</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveAttrUpdateBtn">保存编辑</a>
	</div>
	<!-- ==========   属性 列表   ========================= -->
	<table id="attrTable" width="100%"></table>
</div>

<!-- ==========   属性值   ========================= -->
<div data-options="region:'east'" style="width:250px;">
	<!-- ==========   属性值 工具条   ========================= -->
	<div id="valueToolbar">
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-add'" id="addValueBtn">新增属性值</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-edit'" id="updateValueBtn">修改属性值</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-remove'" id="deleteValueBtn">删除属性值</a>
		<a href="#" class="easyui-linkbutton" data-options="plain:true,iconCls:'icon-save'" id="saveValueUpdateBtn">保存编辑</a>
	</div>
	<!-- ==========   属性值 列表   ========================= -->
	<table id="valueTable" width="100%"></table>
	<!-- ==========   属性值 新增    ========================= -->
<div data-options="region:'center'" >
	<div id="addValueDialog" title="添加属性值" class="easyui-dialog" data-options="modal:true,closed:true" style="width:300px;height:300px;">
		<form id="addValueForm"  method="post">
			<div>
				<table>
					<tr>
						<td>名称</td><td><input type="text" name="name" class="easyui-validatebox" data-options="required:true"/></td>
					</tr>
					<tr>
						<td>排序</td><td><input type="text" name="sort" class="easyui-validatebox" data-options="required:true"/></td>
					</tr>
					<tr>
						<td>属性</td><td><input type="text" name="attr_id" class="easyui-validatebox" data-options="required:true" readonly="readonly"/></td>
					</tr>
				</table>
			</div>
		</form>
	</div>
	
	<!-- 对话框 -->
	<div id="moveDialog" class="easyui-dialog" data-options="modal:true,title:'新增类别',closed:true" style="width:250px;height:190px;">
	
	</div>
	
</div>
<script type="text/javascript">
/* =============  属性值 修改  ============================= */
	$("#updateValueBtn").click(function(){
		var row = $("#valueTable").datagrid('getSelected');
		//console.log(row);
		if(row){
			var rowIndex = $("#valueTable").datagrid('getRowIndex', row);
			$("#valueTable").datagrid('beginEdit', rowIndex);	
		}else{
			$.messager.alert("请选择要修改的行");
			return;
		}
		
	});
	// 保存修改后属性值
	$("#saveValueUpdateBtn").click(function(){
		//console.log("111111111111");
		var rows = $("#valueTable").datagrid("getRows");
		//console.log(rows);
		//console.log("---"+rows);
		var valueList = JSON.stringify(rows);
		
		// json 格式不再是  名 = 值   所以使用传统方式发送ajax请求
		var xhr = new XMLHttpRequest();
		xhr.onload= function(){};
		xhr.open("post", "${root}/admin/value/valueUpdate", true);
		xhr.setRequestHeader("content-type", "application/json");
		xhr.send(valueList);
		$("#valueTable").datagrid("reload");
	});

/* =============  属性值  删除  ============================= */
	$("#deleteValueBtn").click(function(){
		var row = $("#valueTable").datagrid('getSelected');
		if(row){
			$.messager.confirm("确定删除该属性值吗？",function(r){
				if(r){
					$.get("${root}/admin/value/delete",{ id:row.id },function (){
						$("#valueTable").datagrid("reload");
					});
				}
			});
		}else{
			$.messager.alert("请选中一行");
			return;
		}
	});

/* =============  属性值  添加  ============================= */
	$("#addValueBtn").click(function(){
		var row = $("#attrTable").datagrid('getSelected');
		console.log(row);
		$("#addValueForm").form("load", {attr_id:row.id});
		$("#addValueDialog").dialog("open");
		
	});
	
	$("#addValueDialog").dialog({
		buttons:[
			{ text:"保存",handler:function(){
				$("#addValueForm").form("submit",{
					url:"${root}/admin/value/save",
					onsubmit: function(){
						return $("#addAttrForm").form(validate);
					},
					success: function(){
						$("#addValueDialog").dialog("close");
						$("#valueTable").datagrid("reload");
					}
				});
			}}
		]
	});

/* =============  属性值  列表  ============================= */
	$("#valueTable").datagrid({
		idField: "id",
		url:"${root}/admin/value/findByAttr",
		fit: true,
		fitColumns:true,
		toolbar: "#valueToolbar",
		singleSelect:true,
		dndRow: true,                       //此属性开启此表格的行拖动排序功能
		columns:[[
		  {title:"编号", field:"id", width:100},
		  {title:"名称", field:"name", width:100,editor:"text"},
		  {title:"排序", field:"sort", width:100,editor:"text"}
		]],
		onClickRow: function(idx, row) {
			$("#valueTable").datagrid("reload", {
				aid:row.attr_id
			});
		},
		//通过拖动数据行以及右键菜单移动行数据时，都会触发 onDrop 事件。
		onDrop: function (target, source, point) {
            //$.messager.show($.string.format("您刚才将行 {0} 移动到行 {1} 的 {2} 位置", source.Name, target.Name, point));
            var rows = $("#valueTable").datagrid("getRows");
            var sorts = [];
            for(var i = 0; i < rows.length; i++) {
            	sorts.push(rows[i].sort);
            }
            sorts.sort();
            for(var i = 0; i < rows.length; i++) {
            	rows[i].sort = sorts[i];
            	$("#valueTable").datagrid("refreshRow", i);
            }
            $("#valueTable").datagrid("getPanel").find("div.datagrid-view div.datagrid-body table tr.datagrid-row").addClass("droppable");
			
			 
			//$("#attrTable").datagrid("refreshRow", 1);
			//$("#attrTable").datagrid("refreshRow", 2);
			//$("#attrTable").datagrid("refreshRow", 3);
			//$("#attrTable").datagrid("refreshRow", 4);
			 console.log(rows[0].attr_id);
        }
	});







/* =============  属性  删除  ============================= */
$("#deleteAttrBtn").click(function(){
		var row = $("#attrTable").datagrid('getSelected');
		if(row){
			$.messager.confirm("确定删除该属性吗？",function(r){
				if(r){
					$.get("${root}/admin/attr/delete",{ id:row.id },function (){
						$("#attrTable").datagrid("reload");
						$("#valueTable").datagrid("reload");
					});
				}
			});
		}else{
			$.messager.alert("请选中一行");
			return;
		}
	
	});
	
/* =============  属性  添加  ============================= */
	$("#addAttrBtn").click(function(){
		var node = $("#categoryTree").tree("getSelected");
		console.log(node);
		$("#addAttrForm").form("load", {category_id:node.id});
		$("#addAttrDialog").dialog("open");
	});
	
	$("#addAttrDialog").dialog({
		buttons:[
			{ text:"保存",handler:function(){
				$("#addAttrForm").form("submit",{
					url:"${root}/admin/attr/save",
					onsubmit: function(){
						return $("#addAttrForm").form(validate);
					},
					success: function(){
						$("#addAttrDialog").dialog("close");
						$("#attrTable").datagrid("reload");
					}
				});
			}}
		]
	});

/* =============  属性 修改  ============================= */
	$("#updateAttrBtn").click(function(){
		var row = $("#attrTable").datagrid('getSelected');
		//console.log(ow);	
		if(row){	
			var rowIndex = $("#attrTable").datagrid('getRowIndex', row);
			$("#attrTable").datagrid('beginEdit', rowIndex);
		}else{
			$.messager.alert("请选择要修改的行");
		}	
		
	});
	// 保存修改后的属性
	$("#saveAttrUpdateBtn").click(function(){
		var rows = $("#attrTable").datagrid("getRows");
		//console.log(rows);
		var attrList = JSON.stringify(rows);
		
		// json 格式不再是  名 = 值   所以使用传统方式发送ajax请求
		var xhr = new XMLHttpRequest();
		xhr.onload= function(){};
		xhr.open("post", "${root}/admin/attr/attrUpdate", true);
		xhr.setRequestHeader("content-type", "application/json");
		xhr.send(attrList);
		$("#attrTable").datagrid("reload");
	});

/* ============= 属性   查询  ============================= */	
	$("#attrTable").datagrid({
		idField: "id",
		url:"${root}/admin/attr/findByCategory",
		fit: true,
		fitColumns:true,
		toolbar: "#attrToolbar",
		singleSelect:true,
		dndRow: true,                       //此属性开启此表格的行拖动排序功能
		columns:[[
		  {title:"编号", field:"id", width:100},
		  {title:"名称", field:"name", width:100, editor:"text"},
		  {title:"排序", field:"sort", width:100, editor:"text"}
		]],
		onClickRow: function(idx, row) {
			$("#valueTable").datagrid("reload", {
				aid:row.id
			});
		},
		onDrop: function (target, source, point) {
            //$.messager.show($.string.format("您刚才将行 {0} 移动到行 {1} 的 {2} 位置", source.Name, target.Name, point));
            var rows = $("#attrTable").datagrid("getRows");
            var sorts = [];
            for(var i = 0; i < rows.length; i++) {
            	sorts.push(rows[i].sort);
            }
            sorts.sort();
            for(var i = 0; i < rows.length; i++) {
            	rows[i].sort = sorts[i];
            	$("#attrTable").datagrid("refreshRow", i);
            }
            $("#attrTable").datagrid("getPanel").find("div.datagrid-view div.datagrid-body table tr.datagrid-row").addClass("droppable");
			
			
			/* var attrId = [];
			var attrSort = [];
			for(var i = 0;i<rows.length;i++){
			   attrId.push(rows[i].id);
			}
			for(var i = 0;i<rows.length;i++){
			   attrSort.push(rows[i].sort);
			}	 */
			 
			//$("#attrTable").datagrid("refreshRow", 1);
			//$("#attrTable").datagrid("refreshRow", 2);
			//$("#attrTable").datagrid("refreshRow", 3);
			//$("#attrTable").datagrid("refreshRow", 4);
			 console.log(rows[0]);
        }
	});
	
	
	
/* =============  判断是几级类别  ============================= */

	function getLevel(id) {
		if(id / 100 % 10 > 0) {
			return 3;
		} else if(id / 10000 % 10 > 0) {
			return 2;
		} else {
			return 1;
		}
	}


/* =============  类别 树  ============================= */
	$("#categoryTree").tree({			
		url: "${root}/admin/attr/findAll",
		dataPlain : true,		
		onClick: function(node) {
			if(getLevel(node.id) != 3) {
				$.messager.alert("只能为三级类别添加属性");
				return;
			}
			$("#attrTable").datagrid("reload", {
				cid:node.id
			});
		}
	});
	
</script>
</body>
</html>